<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="no" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>体检报告录入</title>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/jqueryCut.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.core.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.scroller.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.datetime.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.select.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.scroller.android-ics.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.i18n.zh.js"></script>
<link href="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<link href="<?=Yii::app()->baseUrl?>/js/jquery/mobiscroll/mobiscroll.scroller.android-ics.css" rel="stylesheet"/>
<link href="<?=Yii::app()->baseUrl?>/css/reset-mobile.min.css" rel="stylesheet"/>
<script type="text/javascript">
$(function () {
  $('#exam-date').mobiscroll().date({ theme: 'android-ics light', mode: "scroller" , lang: "zh", dateFormat: "yy-mm-dd",dateOrder:"yymmdd", label: "体检日期" });
  $('#gender').mobiscroll().select({ theme: 'android-ics light', mode: "scroller",  lang: "zh", label: "性别" });
  $('#age').mobiscroll().select({ theme: 'android-ics light', mode: "scroller", lang: "zh", label: "年龄" });
//  $('#age').onClose(function(event){event.stopPropagation()});

  /*加载“更多体检项目”*/  
  $(":text").parents(".sub-items").css({display:'none'})
  $(":text").parents(".sub-items").prev().css({display:'none'})
  $("#user-name").parents(".sub-items").css({display:'block'})
  
  $("#more").click(function(){
	  $(":text").parents(".sub-items").slideDown();
	  $(":text").parents(".sub-items").prev().show("fast");
	  $(this).css({display:"none"})
	  $("#form-wrapper").css({marginBottom:"100px"})
	});
});

</script>
<style>
  body {
  background: #F2F8FB;
  }
  input {
  border: 0;
  }
  select {
  border: 0;
  }
  .clearfix:after {
  content: '';
  display: table;
  clear: both;
  }
  .tabs-nav li {
  width: 50%;
  border: solid #CACAD9;
  font-size: 1.2em;
  border-width: 1px 0 1px 1px;
  -webkit-box-flex: 1;
  text-align: center;
  color: #898989;
  height: 35px;
  line-height: 35px;
  white-space: nowrap;
  z-index: 100;
  }
  .tabs-nav li img {
  float: right;
  position: relative;
  top: 6px;
  right: 10px;
  }
  .tabs-nav li:last-child {
  border-right: 1px solid #CACAD9;
  }
  .tabs-nav li.state-active {
  background: #fff;
  border-bottom-color: #fff;
  border-top: 3px solid #FDB575;
  color: #FF7800;
  height: 33px;
  }
  .sub-items {
  width: 96%;
  margin: 0 auto 20px;
  background: #fff;
  border: 1px solid #B0B0B0;
  border-radius: 10px;
  }
  .sub-items table {
  width: 100%;
  }
  .sub-item-title {
  margin: 20px 0 10px 10px;
  }
  .sub-items table tr {
  font-size: 1.1em;
  border-bottom: 1px dashed #BFC8C8;
  padding: 5px 0 5px 0;
  }
  .sub-items table tr:last-child {
  border: 0;
  }
  .sub-items table tr th {
  width: 5.8em;
  font-weight: normal;
  padding: 15px 10px;
  text-align: left;
  }
  .sub-items table td input,
  .sub-items table td select {
  width: 40%;
  text-align: center;
  line-height: 50px;
  }
  #submit-wrapper {
  width: 100%;
  height: 60px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #474747), color-stop(1, #202020));
  border-top: 5px solid #6A6A6A;
  position: fixed;
  bottom: 0;
  }
  #submit {
  width: 90%;
  height: 90%;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 4px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FD9C5D), color-stop(1, #FD6F10));
  color: white;
  }
  table input {
  color: #2FB5B9;
  }
  .sub-items table td input {
  height: 100%;
  }
  .alertBg{ width:100%; height:1000px; background:#000;opacity: .7;filter: Alpha(Opacity=70); display:none; position:absolute;left:0px;top:0px;}
  .alertTs{ position:fixed;top:60px;left:50%; width:315px; height:215px; margin:0px auto auto -157px; background:url(images/ts_bg.png) no-repeat;display:none;}
  .alertTs .alertTs_text{ height:142px; line-height:30px; text-align:center; font-size:20px; color:#333; padding-top:60px}
  .alertTs .alertTs_button .button_y{ width:140px; height:44px; line-height:44px; text-align:center; font-size:16px; color:#fff;background:url(images/ts1.png) no-repeat; display:inline-block; margin:12px auto auto 11px;}
  .alertTs .alertTs_button .button_n{ width:140px; height:44px; line-height:44px; text-align:center; font-size:16px; color:#333;background:url(images/ts2.png) no-repeat; display:inline-block;margin:12px auto auto 11px;}
  .alertTs .alertTs_button .button_m{width:290px; height:44px; line-height:44px; text-align:center; font-size:16px; color:#fff;background:url(images/ts3.png) no-repeat; display:inline-block;margin:12px auto auto 11px;}
  #form-wrapper {
 
  }
  div.dwcc > div.dwc:nth-child(2)::before {content: '.';position: absolute;top: 45%;left: 45%;font-size: 40px;color: black;}
  .dwv {
    overflow: hidden;
  }
  /*“加载更多”的样式*/
  #more{height:60px;text-align:center;line-height:60px;background:#eeedf2;color:#000;margin:20px auto 70px;clear:both;background:#fff;}
</style>
</head>
<body> 

<section id="form-wrapper">
  <form action="post" id="report">
  <h1 class="sub-item-title">填写基本信息</h1>
  <div class="sub-items">
    <table>
    <tr>
      <th>体检日期</th>
      <td>
      <input type="text" id="exam-date" name="examdate" />
      </td>
    </tr>
    <tr><th>姓名</th><td><input type="text" name="realname" id="user-name"/></td></tr>
    <tr>
      <th>性别<sup style="color: red">*</sup></th>
      <td>
      <select id="gender" name="gender">
        <option value=""></option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      </td>
    </tr>
    <tr>
      <th>年龄<sup style="color: red">*</sup></th>
      <td>
      <select name="age" id="age">
        <?php
        for($i = 18; $i < 110; $i++) {
          echo "<option value='{$i}'>{$i}</option>";
        }
        ?>
      </select>
      </td>
    </tr>
    </table>
  </div>
  <?php
    foreach ($result as $key => $it) {
      if($key == "basic")
        continue;
  ?>
  <h1 class="sub-item-title"><?=$key?></h1>
  <div class="sub-items">
    <table>
    <?php
      foreach ($it as $item):
    ?>
    <tr>
      <th><?=$item["name"]?></th>
      <td>
      <?php
      $type = isset($item["type"])?$item["type"]:ReportService::NONE;
      $default = isset($item["value"])?$item["value"]:(isset($item["default"])?$item["default"]:"");
      switch ($type) {
      case ReportService::TEXT:
        echo '<input type="text" name="'.$item["name"].'"/>';
        break;
      case ReportService::SELECT:
        echo "<select name='{$item["name"]}' id='{$item["name"]}'>";
        $option = explode(",", $item["option"]);
        if(count($option)==1) {
          $option = array();
          $t = explode("~", $item["option"]);
          for($i=$t[0];$i<=$t[1];$i++) {
            array_push($option, $i);
          }
        }
        echo "<option value=''></option>";
        foreach($option as $o) {
          $select = $default==$o?"selected":"";
          echo "<option value={$o}>{$o}</option>";
        }
        echo "</select>";
       echo "<script>\$(function(){\$('#".$item['name']."').mobiscroll().select({ theme: 'android-ics light', mode: 'scroller', lang: 'zh', label: '".$item['name']."'} );})</script>";
        break;
      case ReportService::RANGE:
      	      	$option = isset($item["option"])?$item["option"]:"";
			$t=explode("~",$option);
        if(is_float($item["step"])) {
          echo "<select name='{$item["name"]}' id='{$item["name"]}'>";
          echo "<option value=''></option>";
          for($i = intval($t[0]); $i <= intval($t[1]); $i++) {
            echo "<optgroup label={$i}>";
            for($j = 0; $j < 100; $j++) {
              echo "<option value='".$i.".".sprintf("%02d", $j)."'>";
              echo sprintf("%02d", $j);
              echo "</option>";
            }
            echo "</optgroup>";
          }
          echo "</select>";
          echo "<script>\$(function(){\$('#".$item['name']."').mobiscroll().select({ theme: 'android-ics light', mode: 'scroller', lang: 'zh', group: true, label: '".$item['name']."'});";
          echo "\$('#".$item['name']."').on('change', function(){\$(this).prev('input').val(\$(this).val())});";/*\$('#".$item['name']."').trigger('change')*/
          echo "})</script>";
        } else {
          echo "<select name='{$item["name"]}' id='{$item["name"]}'>";
          for($i = $t[0]; $i <= $t[1]; $i++) {
            echo "<option value={$i}>{$i}";
            echo "</option>";
          }
          echo "</select>";
          echo "<script>\$(function(){\$('#".$item['name']."').mobiscroll().select({ theme: 'android-ics light', mode: 'scroller', lang: 'zh', label: '".$item['name']."'})})</script>";
        }
        break;
      default:
        break;
      }
      ?>
      <img style="float: right;padding: 14px 0 0 0" src="<?=Yii::app()->baseUrl?>/images/tj_28.png">
      <span style="float: right;margin: 0 12px 0 0;line-height: 50px;width: 64px;text-align: right;"><?=isset($item["unit"])?$item["unit"]:""?></span>
      </td>
    </tr>
    <?php
      endforeach;
    ?>
    </table>
  </div>
  <?php
  }
  ?>
  </form>
</section>
<div id='more'>输入更详细体检内容</div>
<div class="alertBg"></div>
<div class="alertTs alertTs1">
  <div class="alertTs_text">确认提交？</div>
  <div class="alertTs_button"><span class="button_y">确定</span><span class="button_n">取消</span></div>
</div>
<div class="alertTs alertTs2">
  <div class="alertTs_text"></div>
  <div class="alertTs_button"><span class="button_m">确定</span></div>
</div>

<script language="javascript">
$(function () {
  $('table td input').val('');
  $('#gender').val('男');
  /*$('table tr').on('click', function () {
  $(this).children('input').trigger('click');
  });*/
  $('.button_y').click(function (event) {
  tsgb();
  if($('#gender').prev('input').val() && $('#age').prev('input').val()) {
    if($('table td input').each(function () {
    if($(this).val() == '') {
      $(this).next('select').val('');
    }
    }));
    var date = new Date();
    var dateString = (date.getFullYear()) + '-' + (date.getMonth()+1) + '-' + (date.getDate());
    if($('#exam-date').val() == '') {
    $('#exam-date').val(dateString);
    }
    var d = $('#report').serialize();
    $.post("<?=Yii::app()->createAbsoluteUrl("app/user/reportInsert",array("uid"=>isset($_GET["uid"])?$_GET['uid']:''))?>",d,
    function(data){
      // console.log(data);
      alert(data["data"]);
       if(data["status"] != 0){
       ts2(data["data"]);
       }else{
       // window.location.href = "<?=Yii::app()->createAbsoluteUrl("app/user/reportView",array("uid"=>isset($_GET["uid"])?$_GET['uid']:''))?>"+"&reportid="+data["data"]+"&type=1";
       window.location.href = "http://reporttest.pocdoc.cn/index.php?reportid="+data["data"];
       }
    });
  }else{
    event.preventDefault();
    event.stopPropagation();
    ts2('性别和年龄必须输入');
  }
  return false;
  });
  $('#submit').click(function () {
  if($('#gender').prev('input').val() && $('#age').prev('input').val()){
      ts1();
  }else{
    event.preventDefault();
    event.stopPropagation();
    ts2('性别和年龄必须输入');
  }

  });
  $('.button_m').click(function () {
  tsgb();
  });
  function ts1() {
  $(".alertBg").css("height",$("body").height()).show();
  $(".alertTs1").show();
  }
  function ts2(txt) {
  $(".alertBg").css("height",$("body").height()).show();
  $(".alertTs2 .alertTs_text").text(txt);
  $(".alertTs2").show();
  }
  function tsgb() {
  $(".alertBg").hide();
  $(".alertTs").hide();
  }
  $('.button_n').click(function () {
  tsgb();
  return false;
  });
  $('.alertBg').click(function () {
  tsgb();
  return false;
  });
});
</script>

<section id="submit-wrapper">
  <button id="submit">保存并分析</button>
</section>
</body>
</html>
